---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="Astro with Keystatic">
  <main class="max-w-3xl mx-auto px-4">
    <div class="mt-20 max-w-xl mx-auto">
      <h1 class="text-6xl text-white text-center font-bold">
        Welcome to <span
          class="bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-purple-200"
          >Astro with Keystatic</span>
      </h1>
    </div>
    <p
      class="text-white text-lg mt-12 bg-purple-500/25 p-6 border border-purple-400 rounded-lg"
    >
      This starter wires up Astro with with Keystatic and a few content
      collection entries. You can see those entries in <a
        href="/blog"
        class="underline hover:no-underline">the blog demo</a
      >, and edit them via <a
        href="/keystatic"
        class="underline hover:no-underline"
        >the <code class="text-purple-200 font-mono font-semibold"
          >keystatic</code
        > route</a
      >.
    </p>
    <ul role="list" class="mt-10 grid sm:grid-cols-2 gap-6 md:gap-8">
      <Card
        href="/blog"
        title="Blog demo"
        body="Astro's content collections, managed with Keystatic."
      />
      <Card
        href="https://keystatic.com/docs"
        title="Keystatic Documentation"
        body="Learn more about Keystatic on the official documentation website."
      />
      <Card
        href="https://docs.astro.build/"
        title="Astro Documentation"
        body="Learn how Astro works and explore the official API docs."
      />
      <Card
        href="https://astro.build/integrations/"
        title="Integrations"
        body="Supercharge your project with new frameworks and libraries."
      />
      <Card
        href="https://astro.build/themes/"
        title="Themes"
        body="Explore a galaxy of community-built starter themes."
      />
      <Card
        href="https://astro.build/chat/"
        title="Community"
        body="Come say hi to our amazing Discord community. ❤️"
      />
    </ul>
  </main>
</Layout>
